<template>
  <div class="app-cont">
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>
    <!--这是 Header 区域 -->
    <div class="main">
      <div class="main-container">
        <div class="fenlei">
          <div class="address">
            <!--公司名称-->
            <mt-field type="text" label="公司名称" placeholder="请填写（必填项）" v-model="name">
              <div class="mint-field-other">&gt;</div>
            </mt-field>
            <!--税号-->
            <mt-field label="税号" type="number" placeholder="15-20位，企业报销时必填" v-model="number">
              <div class="mint-field-other">&gt;</div>
            </mt-field>
            <!--公司地址-->
            <mt-field label="公司地址" placeholder="请填写" type="text" v-model="address">
              <div class="mint-field-other">&gt;</div>
            </mt-field>
            <!--公司电话-->
            <mt-field label="公司电话" placeholder="请填写" type="number" v-model="tel">
              <div class="mint-field-other">&gt;</div>
            </mt-field>
            <!--开户银行卡号-->
            <!--<a data-v-b58815fe="" class="mint-cell mint-field">-->
            <!--<div class="mint-cell-left"></div>-->
            <!--<div class="mint-cell-wrapper">-->
            <!--<div class="mint-cell-title">-->
            <!--<span class="mint-cell-text">开户银行卡号</span>-->
            <!--</div>-->
            <!--<div class="mint-cell-value"><input placeholder="请填写银行卡号" number="true" type="text" class="mint-field-core" value="" size="25" @keyup="formatBankNo()" @keydown="formatBankNo()" name="account" id="account" ref="card">-->
            <!--<div class="mint-field-clear" style="display: none;">-->
            <!--<i class="mintui mintui-field-error"></i>-->
            <!--</div> <span class="mint-field-state is-default">-->
            <!--<i class="mintui mintui-field-default"></i>-->
            <!--</span>-->
            <!--<div class="mint-field-other">-->
            <!--<div data-v-b58815fe="" class="mint-field-other">&gt;</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="mint-cell-right"></div>-->
            <!--</a>-->
            <!--&lt;!&ndash;开户银行&ndash;&gt;-->
            <!--<mt-field label="开户银行" placeholder="请选择" type="text" v-model="bank">-->
            <!--<div class="mint-field-other">&gt;</div>-->
            <!--</mt-field>-->
            <!--设为默认-->
            <div class="select" @click="selected()">
              <span :class="pretermission===1?'red':''">设为默认</span>
              <i :class="pretermission===1?'selected':''"></i>
            </div>
          </div>
          <!--保存按钮-->
          <div class="btn">
            <a href="javascript:;" class="btn-next" @click="NewCard">保存</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  /* eslint-disable semi */
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
import {relogin} from "../components/httpUtil/httpUtil";

  export default {
    name: 'billCreate',
    data () {
      return {
        name: '',
        number: '',
        address: '',
        tel: '',
//        card: '',
//        bank: '',
        pretermission: 0,
//        select: 'selected',
        clickIndex: 0,
        showAlert:false,
        alertText:null
//        value: ''
      }
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false;
      },
      getData () {
        const jsonValue = JSON.stringify({
          'c': '10036',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id, // 用户ID
            'tokenId': token(),
            'companyName': this.name,
            'dutyParagraph': this.number,
            'companyAddress': this.address,
            'companyPhone': this.tel,
            'state': this.pretermission
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res);
          const data = res.data.p;
          if (data.isTrue === true) {
            this.$router.push({name: 'bill',
              params: {}
            });
            //          this.$emit('has-log', res.data.username);
          } else {
            this.alertTip(data.errorMsg);
            if (data.errorCode === 90) {
              this.go= ()=> {
                this.showAlert = false
                let _this = this
                relogin(_this)
              }
            }
          }
        }, (res) => {
          this.alertTip('网络错误');
          this.go = ()=>{
             this.showAlert = false;
          }
        })
      },
      selected () {
//        this.curId = this.length + 1;
        this.clickIndex ++;
        if (this.clickIndex % 2 !== 0) {
          this.pretermission = 1;
//          this.length ++;
        } else {
          this.pretermission = 0;
        }
        console.log(this.pretermission)
      },
//      验证银行卡号
//      formatBankNo () {
////        console.log(this.$refs.card.value)
//        if (this.$refs.card.value === '') return;
//        var account = this.$refs.card.value;
//        account = account.substring(0, 22);
// //        帐号的总数, 包括空格在内
//        if (account.match('.[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}') == null) {
// //        对照格式
//          if (account.match('.[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|' + '.[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|' + '.[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}|' + '.[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{7}') == null) {
//            let accountNumeric = '';
//            let accountChar = '';
//            let i;
//            for (i = 0; i < account.length; i++) {
//              accountChar = account.substr(i, 1);
//              if (!isNaN(accountChar) && (accountChar !== ' ')) accountNumeric = accountNumeric + accountChar;
//            }
//            account = '';
//            for (i = 0; i < accountNumeric.length; i++) {  // 可将以下空格改为-,效果也不错
//              if (i === 4) account = account + ' ';
//              // 帐号第四位数后加空格
//              if (i === 8) account = account + ' ';
//              // 帐号第八位数后加空格
//              if (i === 12) account = account + ' ';
//              // 帐号第十二位后数后加空格
//              account = account + accountNumeric.substr(i, 1)
//            }
//          }
//        } else {
//          account = ' ' + account.substring(1, 5) + ' ' + account.substring(6, 10) + ' ' + account.substring(14, 18) + '-' + account.substring(18, 25);
//        }
//        if (account !== this.$refs.card.value) this.$refs.card.value = account;
//      },
//      保存新建信息
      NewCard () {
        let regTel = /^1[34578]\d{9}$/; // 手机号验证
        let regNumber = /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/; // 税号验证
        //        alert('保存成功！' + this.pretermission)
        if (this.name !== '' && regNumber.test(this.number) && regTel.test(this.tel) && this.address !== '') {
          this.getData();
          this.$router.push({name: 'bill', params: {}})
        } else if (this.tel !== '' && !regTel.test(this.tel)) {
          this.alertTip('手机格式不正确');
          this.go = ()=>{
             this.showAlert = false;
          }
        } else if (this.number !== '' && !regNumber.test(this.number)) {
          this.alertTip('税号格式不正确');
          this.go = ()=>{
             this.showAlert = false;
          }
          // alert('税号格式不正确');
        } else {
          this.alertTip('请完整填写相关信息');
          this.go = ()=>{
             this.showAlert = false;
          }
          // alert('请完整填写相关信息')
        }
      }
    },
    created(){
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    }
  }
</script>

<style lang="scss" scoped>
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
  }

  .fenlei {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    ::-webkit-scrollbar {
      display: none;
    }
    .select {
      height: 90px;
      margin-top: 20px;
      line-height: 90px;
      background: #ffffff;
      span {
        font-size: 24px;
        margin-left: 27px;
      }
      i {
        width: 32px;
        height: 32px;
        background: url('../assets/images/ico_2@1x.png') no-repeat;
        background-size: 100%;
        float: right;
        margin: 30px;
      }
      .selected {
        background: url('../assets/images/ico_1@1x.png') no-repeat;
        background-size: 100% 100%;
      }
      .red {
        color: #ff0000
      }
    }
    .btn {
      width: 100%;
      height: 120px;
      text-align: center;
      line-height: 120px;
      background: #f4f4f4;
      position: fixed;
      bottom: 0;
      .btn-next {
        display: inline-block;
        width: 580px;
        height: 74px;
        margin: 0;
        border-radius: 35px;
        border: 1px solid #fe3519;
        color: #fe3519;
        text-align: center;
        line-height: 74px;
        font-size: 26px;
      }
    }
  }

</style>
<style lang="scss">
  a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    outline: none;
  }

  .fenlei {
    .address {
      position: relative;
      margin-top: 30px;
      width: 100%;
      /*height: 298px;*/
      height: 100%;
      background: #f4f4f4;
      .mint-checklist {
        .mint-cell {
          padding-left: 0;
        }
      }
      .mint-cell {
        height: 94px;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
      }
      .mint-cell-wrapper {
        line-height: 94px;
        background-image: none;
        border-bottom: 1px solid #f4f4f4;
      }
      .mint-field-title {
        width: 200px;
      }
      .mint-field-core {
        text-align: right;
        box-sizing: border-box;
        padding-right: 18px;
      }
    }
  }

</style>
